
<script lang="ts">
import {
    defineComponent,
    ref,
    watchEffect,
    onUnmounted,
    computed,
    onMounted,
} from "vue";
import { getAssetsFile } from "@/utils/pub-use";
import { toStringMatch } from "@/utils/format";
import { getPriceList } from "@/api";
import { AppModule } from "@/store/modules/app";

export default defineComponent({
    setup() {
        const PriceIicon = ref([
            {
                name: "BTC",
                chainName: "Bitcoin",
                icon: getAssetsFile("icon/BTC.png"),
            },
            {
                name: "ETH",
                chainName: "Ethereum",
                icon: getAssetsFile("icon/ETH.png"),
            },
            {
                name: "USDT",
                chainName: "USDT",
                icon: getAssetsFile("icon/USDT.svg"),
            },
            {
                name: "BNB",
                chainName: "BNB",
                icon: getAssetsFile("icon/BNB.svg"),
            },
            {
                name: "XRP",
                chainName: "XRP",
                icon: getAssetsFile("icon/XRP.png"),
            },
            {
                name: "USDC",
                chainName: "USD Coin",
                icon: getAssetsFile("icon/USDC.png"),
            },
            {
                name: "ADA",
                chainName: "Cardano",
                icon: getAssetsFile("icon/ADA.png"),
            },
            {
                name: "DOGE",
                chainName: "Dogecoin",
                icon: getAssetsFile("icon/DOGE.png"),
            },
            {
                name: "SOL",
                chainName: "Solana",
                icon: getAssetsFile("icon/SOL.png"),
            },
            {
                name: "TRX",
                chainName: "TRON",
                icon: getAssetsFile("icon/TRX.png"),
            },
            {
                name: "DOT",
                chainName: "Polkadot",
                icon: getAssetsFile("icon/DOT.png"),
            },
            {
                name: "DAI",
                chainName: "Dai",
                icon: getAssetsFile("icon/DAI.png"),
            },
            {
                name: "MATIC",
                chainName: "Polygon",
                icon: getAssetsFile("icon/MATIC.png"),
            },
            {
                name: "LTC",
                chainName: "Litecoin",
                icon: getAssetsFile("icon/LTC.png"),
            },
        ]);
        const PriceList = ref([]);
        const timer = ref();

        const GetPriceList = () => {
            getPriceList().then((res) => {
                PriceList.value = res.data.data.PriceList || [];
            });
        };
        watchEffect(() => {
            timer.value = setInterval(() => {
                GetPriceList();
            }, 1500);
        });

        onMounted(() => {
            GetPriceList();
        });

        // 在组件销毁时清除定时器
        onUnmounted(() => {
            clearInterval(timer.value);
        });
        const tranNumber = computed(() => {
            return (num, point) => {
                let numStr = num.toString().split(".")[0];
                if (numStr.length < 6) {
                    // 判断数字有多长,如果小于6,,表示10万以内的数字,让其直接显示
                    return toStringMatch(num, point);
                } else if (numStr.length >= 6 && numStr.length <= 8) {
                    // 如果数字大于6位,小于8位,让其数字后面加单位万
                    let decimal = numStr.substring(
                        numStr.length - 4,
                        numStr.length - 4 + point
                    );
                    // 由千位,百位组成的一个数字
                    if (["zh", "hk"].indexOf(AppModule.language) !== -1) {
                        return (
                            parseFloat(parseInt(num / 10000) + "." + decimal) +
                            "万"
                        );
                    } else {
                        return (
                            toStringMatch(
                                parseFloat(
                                    parseInt(num / 10000) + "." + decimal
                                ) / 100,
                                6
                            ) + "m"
                        );
                    }
                } else if (numStr.length > 8) {
                    // 如果数字大于8位,让其数字后面加单位亿
                    let decimal = numStr.substring(
                        numStr.length - 8,
                        numStr.length - 8 + point
                    );
                    if (["zh", "hk"].indexOf(AppModule.language) !== -1) {
                        return (
                            parseFloat(
                                parseInt(num / 100000000) + "." + decimal
                            ) + "亿"
                        );
                    } else {
                        return (
                            toStringMatch(
                                parseFloat(
                                    parseInt(num / 100000000) + "." + decimal
                                ) / 10,
                                6
                            ) + "b"
                        );
                    }
                }
                return toStringMatch(num);
            };
        });
        return {
            toStringMatch,
            PriceList,
            PriceIicon,
            tranNumber,
            AppModule,
        };
    },
});
</script>
<template>
    <div class="ranking">
        <ul>
            <li v-for="(item, index) in PriceList" :key="index" class="borderGradient">
                <div class="info">
                    <div class="image" :class="'image'+index">
                        <img :src="PriceIicon[index].icon" alt="" srcset="" />
                    </div>
                    <div class="name">
                        {{ PriceIicon[index].name }}
                        <span>{{ tranNumber(item.quoteVolume, 2) }}</span>
                    </div>
                </div>
                <!-- <div class="price" v-if="index == 2 || index ==10">{{ toStringMatch(item.PriceCNY, 8) }}
                    <span>$ {{ toStringMatch(item.lastPrice, 8) }}</span>
                </div> -->
                <div class="price">{{ toStringMatch(item.PriceCNY, 4) }}
                    <span>$ {{ toStringMatch(item.lastPrice, 4) }}</span>
                </div>
                <div class="increase">
                    <div class="increasePrice" :style="{
                        background:
                            Math.sign(item.priceChangePercent) !== -1
                                ? 'rgba(11, 166, 98, 1)'
                                : '#ff5252',
                    }">
                        {{ Math.sign(item.priceChangePercent) !== -1 ? "+" : ""
                        }}{{ item.priceChangePercent || 0 }}%
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>



<style lang="less" scoped>
.ranking {
    margin-top: 8px;

    ul {
        li {
            margin-bottom: 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 15px;
            background: #222328;
            border-radius: 12px;

            .info {
                flex: 100px 0 0;
                display: flex;
                align-items: center;
                .image {
                    width: 32px;
                    height: 32px;
                    border-radius: 50%;
                    &.image19 {
                        background: #fff;
                    }
                    img {
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                    }
                }

                .name {
                    margin-left: 8px;
                    font-weight: 500;
                    font-size: 13px;

                    span {
                        margin-top: 3px;
                        display: block;
                        font-weight: normal;
                        font-size: 12px;
                        color: #fff;
                        opacity: 0.5;
                    }
                }
            }

            .price {
                flex: 100px 0 0;
                padding-left: 30px;
                box-sizing: border-box;
                font-size: 13px;
                font-weight: bold;
                color: #fff;

                span {
                    margin-top: 6px;
                    display: block;
                    font-size: 10px;
                    font-weight: 500;
                    color: #fff;
                    opacity: 0.5;
                }
            }

            .increase {
                flex: 100px 0 0;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                text-align: right;

                .increasePrice {
                    width: 65px;
                    height: 28px;
                    line-height: 28px;
                    text-align: center;
                    border-radius: 4px;
                    color: #fff;
                }
            }
        }
    }
}
</style>
